<template>
  <el-checkbox-group v-model="checkedList" @change="handleCheckedChange" class="grid grid-cols-3 gap-15px">
    <div v-for="(item, index) in dataList" :key="item.fnId" class="flex flex-col relative">
      <div class="video-wrapper">
        <video class="w-100% video-player" :id="'my-video' + index" preload="auto" height="200px"
          poster="@/assets/imgs/videoPoster.png" @timeupdate="timeupdate">
          <source :src="item.fnUrl" />
        </video>
        <div class="play-button" @click="playVideo(index)">
          <svg v-if="!item.playVideoState" t="1723794794074" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="6314" width="42" height="42">
            <path
              d="M420.397 310.473l307.786 183.206c21.984 14.657 14.657 21.984 0 29.313l-315.114 190.535c-21.984 14.657-29.313 7.328-29.313-14.657v-381.068c0-21.984 14.657-21.984 36.641-7.328zM449.71 266.503l307.786 183.206c51.298 36.641 51.298 87.939 0 117.252v0l-315.114 190.535c-21.984 14.657-51.298 21.984-80.611 7.328-21.984-14.657-29.313-36.641-29.313-65.954v-381.068c0-21.984 7.328-43.97 29.313-58.626 29.313-14.657 58.626-7.328 87.939 7.328zM508.336 32c-263.817 0-476.336 212.519-476.336 476.336s212.519 483.664 476.336 483.664c263.817 0 483.664-219.848 483.664-483.664 0-263.817-219.848-476.336-483.664-476.336v0z"
              p-id="6315" fill="#515151"></path>
          </svg>
          <svg v-else t="1723794746171" class="icon" viewBox="0 0 1024 1024" version="1.1"
            xmlns="http://www.w3.org/2000/svg" p-id="6152" width="42" height="42">
            <path
              d="M512 0C229.227168 0 0 229.227168 0 512s229.227168 512 512 512S1024 794.772832 1024 512 794.772832 0 512 0z m-60.831546 704.742145c0 34.190805-25.027836 62.180268-55.617413 62.180268s-55.617413-27.975559-55.617413-62.180268V319.257855c0-34.190805 25.027836-62.180268 55.617413-62.180268s55.617413 27.975559 55.617413 62.180268z m225.945741 0c0 34.190805-25.027836 62.180268-55.617413 62.180268s-55.617413-27.975559-55.617413-62.180268V319.257855c0-34.190805 25.027836-62.180268 55.617413-62.180268s55.617413 27.975559 55.617413 62.180268z"
              p-id="6153" fill="#515151"></path>
          </svg>
        </div>
      </div>
      <el-checkbox :label="item.name" :value="item.fnId">
        <el-tooltip class="box-item" effect="dark" :content="item.fnTitle" placement="top">
          <div class="v-title w-250px overflow-hidden">{{ item.fnTitle }}</div>
        </el-tooltip>
      </el-checkbox>
      <div class="flex justify-between items-center c-#BDBDBD font-size-13px mt-10px mb-10px">
        <span>格式：{{ item.format }}</span>
        <span>大小：{{ item.size }}</span>
      </div>
      <el-divider border-style="dashed" />
      <div class="flex h25px">
        <el-button type="primary" size="small" @click="Detail(item.fnId)">查看详情</el-button>
        <el-button type="success" size="small">下载申请</el-button>
      </div>
    </div>
  </el-checkbox-group>
</template>

<script setup>
const props = defineProps({
  dataList: {
    type: Array,
    default: () => []
  }
})

const isIndeterminate = defineModel()
const dataList = ref([])
const checkedList = ref([])

onMounted(() => {
  dataList.value = props.dataList
})

const timeupdate = (e) => {
  console.log(e)
  console.log(e.target.currentTime)
}
const handleCheckedChange = (value) => {
  const checkedCount = value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < dataList.value.length
}
// 查看详情
const Detail = (id) => {
  // 视频详情
  const url = `${window.location.origin}/search/video/detail?id=${id}&buttonState=${false}`
  window.open(url, '_blank')
}

const playVideo = (index) => {
  const video = document.getElementById('my-video' + index)
  if (video.paused) {
    video.play()
    dataList.value[index].playVideoState = true
  } else {
    video.pause()
    dataList.value[index].playVideoState = false
  }
}
defineExpose({
  checkedList,
  dataList,
})
</script>

<style lang="scss" scoped>
.v-title{
  white-space: nowrap;
  text-overflow: ellipsis;
}

:deep(.el-divider--horizontal) {
  margin: 10px 0 !important;
}

.video-wrapper {
  position: relative;
}

.video-player {
  width: 100%;
  /* Removing default controls */
  background-color: black;
  /* Default background color if controls are removed */
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
</style>
